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ABSTRACT. The advancement of modern technologies and the evolution of the web have led to a multitude of 
technological innovations. Concurrently, web projects have become increasingly diverse and iterative. The emer- 
gence of complex systems has presented challenges that existing approaches cannot adequately address, thereby 
necessitating the development of novel architectures, technologies, and methodologies. Notably, adopting micro- 
service architecture has effectively resolved issues encountered in large-scale projects and significantly enhanced 
their manageability and flexibility. Similarly, in response to the requirements of client-side applications, a demand 
for adopting a novel architectural approach has arisen. 

The work presents the usefulness of using Monorepo and Micro Front-end architecture in technological 
projects and private web development in a single workspace. This method is suitable for the development of 
large-scale, complex projects. The architecture of client-side Angular and server-side NestJS technologies will 
be discussed in this article. Huge corporations such as Google, Facebook, and others employ these tactics. 
The paper clearly demonstrates why this architecture is the ideal answer for online projects and the benefits 
it provides developers over other existing and experienced alternatives. The work is useful both theoretically 
and practically. 
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INTRODUCTION 


project. In this situation, the project's complexity, scale, 


Recently, the function of programming has been 
expanding as software products have become more 
complicated and large-scale. In this instance, prac- 
tical project architecture is critical. The program 
performs much better with a properly chosen archi- 
tecture, the software code is ordered, and the error 
resistance is great. 

It is preferable to examine and design the project 
architecture ahead of time before beginning a new 
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version control, and other elements should be defined 
so that future development is not hampered. After all 
of this, the architecture should be properly selected re- 
gardless of the project's aim. 

Fortunately, numerous methods to project archi- 
tecture are available today [2, 4]. It is pretty easy to 
distinguish between them, so we can easily select the 
suitable architecture for a certain project. The project's 
structure defines the architecture chosen, the future 
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development plan, the number of developers involved, 
and other elements that will contribute to the pro- 
gram's future development. 

It should be remembered that as programming 
evolves, so does the project’s architecture, which im- 
proves even more and becomes more aligned with the 
framework of a given direction. This enables us to start 
a new project with a carefully chosen programming lan- 
guage and an architecture tailored to it. 


REVIEWING THE MONOLITH AND MICRO 
SERVICE ARCHITECTURE 


Companies are currently deciding between two 
service architectures: monolithic and micro-service 
architecture [1, 2, 3]. The first was a monolithic ar- 
chitecture because the services that were still being 
generated at the end of the twentieth century did not 
have a distinct structure; the majority of the software 
code was included in one project, and the service was 
implemented in accordance with the supplied project. 
In fact, such a configuration implies the substance of 
monolithic design. Later, programming development 
necessitated the creation of new designs, such as mi- 
croservice architecture, service-oriented architecture, 
and others[7]. The primary principle of microservice 
architecture is to break the project into portions based 
on logic, which facilitates control, updating, and main- 
tenance of independent services. 

Correctly picked architecture is critical to the 
future development of the project. If we know that 
the service will not be burdened with several busi- 
ness logic and that the modification will be minimal, 
we should select a monolithic design because the 
development process will be much easier and fast- 
er, which will help us save resources. And, if we are 
dealing with a huge, dynamic, multifunctional project 
on which numerous teams are working concurrently, 
it is preferable to utilise a microservice design, which 
ensures stability against changes. It should also be 
noted that this design is connected with substantially 
higher expenditures in terms of server infrastructure, 
as well as a much more complex implementation pro- 
cedure. 
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SYNTHESIS OF MONOREPO AND 
MIRCO FRONTEND 


Monorepo is a repository that houses all of the or- 
ganisation’s services, whether they are server-side or 
client-side. Rather than storing services independently, 
a single repository orchestrates all services. A develop- 
er can simply access all of their company's service code 
with the help of Monorepo. A developer can easily em- 
ploy current software code in a task in another service 
using a similar approach. This strategy avoids devel- 
oping the same software code many times; instead, it 
makes use of existing software code in the project. 

To create Micro Frontend architecture [3, 5, 6], sim- 
ilar to the microservices architecture designed for the 
server, massive projects on the client side must also be 
compartmentalised. The creation and success of mi- 
croservice architecture was critical in the evolution of 
this strategy. However, compared to microservices, the 
Micro Frontend design is significantly more complex be- 
cause it is important to partition the visual component 
of the project in such a way that user integrity is not 
breached. 

Although the Micro Frontend design provides many 
benefits to the development team and is handy for 
project development using rapid, flexible, and modern 
ways, several issues go against best practices. For ex- 
ample, having logic replicated in both a server-side ser- 
vice and a client-side application when both client-side 
and server-side modules utilise a corresponding proj- 
ect-wide common business logic model. 

This issue can be adequately solved by integrat- 
ing Monorepo with Micro Frontend architecture. This 
method enables us to join numerous services in one 
area, whether it's a web application or an api, and ex- 
change codes and components that different services 
share. To do all of this, we must employ the NX system, 
which provides a synthesis of monorepo and Micro 
Frontend architectures, as well as shared libraries. 


IMPLEMENTATION OF MICRO FRONTEND 
ARCHITECTURE 


Considering the Micro Frontend architecture, we 
can add distinct features in separate web apps. With the 
appropriate command, this strategy can be applied in 
the NX environment [4]. 

Considering the Micro Frontend design, we have 
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the ability to add numerous capabilities to specific web 
apps. With the appropriate command, this strategy can 
be applied in the NX environment. 


npx nx g @nrwl/angular:host main —— re- 
motes=home, products 


where main denotes the main project, which com- 
prises all remote web apps, and home and products 
denote remote applications. When you run this com- 
mand, the schematics in NX will automatically generate 
the relevant projects and connect them. In the case of 
remote apps, a module-federation.config.js file is creat- 
ed that contains the remote's name and project adress. 


Figure 1. Configuration in Dependent Files. 


The names of the remote applications are already 
specified in the module-federation.config.js file for the 


host, the main application. 


Figure 2. Configuration in Main File. 


In terms of how Micro Frontend architecture works, 
remote applications are hosted on multiple servers 
alongside the main program and are loaded as needed. 
If the user navigates to the Products page in the follow- 
ing project example, the main project will load and visu- 


“options” 


"port": 4201, 


“publicHost™ 


alise the matching distant Products. To avoid complicat- 
ing the development process, NX ensures that projects 
can be executed on different ports during development. 
The ports’ configuration is provided in the project.json 
file of each remote project. 


Figure 3. Port of Main Modules. 


When starting the main project, which is begun 
after the nx serve command, the NX system starts the 
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main project on the default port first, followed by the 
remote projects on other ports. 
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http://localhost: 
Hit_CTRL-C_ to sto 


the server 


http://localhost: 


Hit CTRL-C to stop the server 


Figure 4. Ports of Dependent Modules. 


These graphics demonstrate which projects are run- 
ning on which ports. The remote Home project is run- 
ning on port 4201, while the Products project is running 
on port 4202. 

The web api connection in the monorepo is accom- 
plished through the use of a proxy server; all requests 


made from the web application are routed through the 
proxy server. A proxy.conf.json file is produced in the 
web project that uses the web api to obtain and pro- 
cess information. This file contains the corresponding 
configuration. /api is a header used in web projects to 
perform api queries, e.g. /api/auth/login. 


Figure 5. Rout of Main API. 


CONCLUSION 


The expansion of modern technology and the web 
space has resulted in numerous technological advance- 
ments in this field. Web projects have grown fairly 
broad and iterative, with the emergence of new paths 
that, in addition to the development of web apps, give 
developers and users the finest project management 
methodologies. 

When complex systems appeared, traditional tech- 
nologies and so-called frameworks could no longer do 
the intended tasks. Therefore, new architectures, tech- 
nologies, and techniques emerged. Microservice design, 
for example, has easily solved challenges in large-scale 
projects and made their management much easier and 
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more flexible. Similar to the Microservice architecture 
developed for the server-side programming language, 
a new architecture was required for the client-side ap- 
plication. As a result of all of this, Micro Frontend ar- 
chitecture emerged, which played a pivotal part in the 
development of huge projects such as Upwork, IKEA, 
and others. 

The existing methodologies can deal with the sup- 
plied projects now, although changes in the aforemen- 
tioned structures and technologies are probable in the 
future. 
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